<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>汽车详情</title>
    <link rel="shortcut icon" href="#"/>
    <link rel="stylesheet" href="../element-ui/element.css">
    <link rel="stylesheet" type="text/css" href="../../bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/cln/css/carbase.css"/>
</head>
<body>
<script src="../../vue/vue.js"></script>
<script src="../../vue/vue.min.js"></script>
<script src="../element-ui/element.js"></script>
<script src="../../jquery/jquery-3.4.1.js"></script>
<script src="../../bootstrap/js/bootstrap.min.js"></script>
<div id="main" style="line-height:20px;height: 20px;cursor: pointer;margin-bottom: 20px">
    <!--导航头-->
    <div class="container" style="background: #1E9FFF;width: 100%;height: 65px">
        <div style="width: 85%;margin: 0 auto;">

            <img src="../../2-post/images/logo.png" alt="" class="layui-circle"
                 style="height: 60px;width: 80px;">
            <span style="font-size: x-large;color: #0C0C0C;font-weight: bolder;">爱车论坛</span>
            <a href="../../2-post/post.html">
                <span style="font-size: x-large;font-weight: bolder;color: #B1E1FF;margin-left: 50px">去看帖</span></a>

            <!--<li class="layui-nav-item" style="margin-left: 50px;list-style: none;display: inline" id="first">-->


            <ul class="newul">

                <li style="float: right;margin-top: -20px;height: 95px;line-height: 95px">
                    <a href="../../4_user/personself/index.html">
                        <span style="font-size: medium;color: #B1E1FF">个人中心</span>
                    </a>
                </li>


                <li style="float: right;margin-top: -20px;margin-right: 40px;height: 95px;line-height: 95px">
                    <a href="../4_user/personself/index.html" class="noLog">
                        <span style="font-size: medium;color: #B1E1FF" class="noLog">登录</span>
                    </a>

                    <a href="" class="Log">
                        <span style="font-size: medium;color: #B1E1FF" class="Log">退出登录</span>
                    </a>
                </li>

                <li style="float: right;margin-top: -20px;height: 95px;line-height: 95px">
                    <a href="../4_user/personself/index.html" class="regist">
                        <span style="font-size: medium;color: #B1E1FF" class="regist">注册</span>
                    </a>

                    <a href="../4_user/personself/index.html" class="userInfo">
                        <img class="userImg" style="width: 50px;height: 50px">
                        <span style="font-size: medium;color: #B1E1FF;" class="userName"></span>
                    </a>
                </li>

            </ul>
        </div>
    </div>
    <!--导航头-->

    <el-breadcrumb separator-class="el-icon-arrow-right" style="padding-top: 30px">
        <el-breadcrumb-item onclick="main()" class="main">首页</el-breadcrumb-item>
        <el-breadcrumb-item onclick="car()" class="main">看看车吧</el-breadcrumb-item>
        <el-breadcrumb-item>汽车详情</el-breadcrumb-item>
    </el-breadcrumb>
    <div style="padding: 0px 20px;">
        <div class="row">
            <div class="left col-lg-6 col-md-6 col-sm-1" id="carImg"></div>
            <div class="right col-lg-6 col-md-6 col-sm-1">
                <h2 id="h2"></h2>
                <div class="clear"></div>
                <div class="list">
                    <ul>
                        <li><label>级　别：</label><span id="clevel"></span></li>
                        <li><label>油　耗：</label><span id="oil"></span></li>
                        <li><label>质　保：</label><span id="quality"></span></li>
                    </ul>
                    <ul>
                        <li><label>排　量：</label><span id="displacement"></span></li>
                        <li><label>变速箱：</label><span id="gearbox"></span></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="clear"></div>
        <p class="text">汽车配置参数</p>
        <table width="90%" border="0" cellspacing="0" cellpadding="0" class="deploy_tb">
            <tr class="deploy_hd">
                <td colspan="4"><span>车身参数</span></td>
            </tr>
            <tr class="deploy_tr">
                <td class="w148 bdl">车长</td>
                <td id="carLong" class="w237"></td>
                <td class="w148 bdl">车宽</td>
                <td id="carWidth" class="w237"></td>
            </tr>
            <tr class="deploy_tr">
                <td class="w148 bdl">车高</td>
                <td id="carHeight" class="w237"></td>
                <td class="w148 bdl">轴距</td>
                <td id="wheelbase" class="w237"></td>
            </tr>
            <tr class="deploy_tr">
                <td class="w148 bdl">最小离地间隙</td>
                <td id="smallspace" class="w237"></td>
                <td class="w148 bdl">前轮距</td>
                <td id="frontspace" class="w237"></td>
            </tr>
            <tr class="deploy_tr">
                <td class="w148 bdl">后轮距</td>
                <td id="rearspace" class="w237"></td>
                <td class="w148 bdl">车身结构</td>
                <td id="structure" class="w237"></td>
            </tr>
            <tr class="deploy_tr">
                <td class="w148 bdl">车门数</td>
                <td id="door" class="w237"></td>
                <td class="w148 bdl">座位数</td>
                <td id="seat" class="w237"></td>
            </tr>
            <tr class="deploy_tr">
                <td class="w148 bdl">油箱容积</td>
                <td id="oilspace" class="w237"></td>
                <td class="w148 bdl">行李箱最小容积</td>
                <td id="minisize" class="w237"></td>
            </tr>
            <tr class="deploy_tr">
                <td class="w148 bdl">行李箱最大容积</td>
                <td id="bigsize" class="w237"></td>
                <td class="w148 bdl"></td>
                <td class="w237"></td>
            </tr>
        </table>
        <table width="90%" border="0" cellspacing="0" cellpadding="0" class="deploy_tb">
            <tr class="deploy_cn">
                <td colspan="4"><span>发动机</span></td>
            </tr>
            <tr class="deploy_tr">
                <td class="w148 bdl">排量</td>
                <td id="edisplacement" class="w237"></td>
                <td class="w148 bdl">进气形式</td>
                <td id="einlet" class="w237"></td>
            </tr>
            <tr class="deploy_tr">
                <td class="w148 bdl">汽缸排列形式</td>
                <td id="ectype" class="w237"></td>
                <td class="w148 bdl">汽缸数</td>
                <td id="ecnum" class="w237"></td>
            </tr>
            <tr class="deploy_tr">
                <td class="w148 bdl">缸盖材质</td>
                <td id="ematerial" class="w237"></td>
                <td class="w148 bdl">燃料</td>
                <td id="fuel" class="w237"></td>
            </tr>
            <tr class="deploy_tr">
                <td class="w148 bdl">供油方式</td>
                <td id="eoilsupply" class="w237"></td>
                <td class="w148 bdl">环保标准</td>
                <td id="environmental" class="w237"></td>
            </tr>
        </table>
        <table width="90%" border="0" cellspacing="0" cellpadding="0" class="deploy_tb">
            <tr class="deploy_cn">
                <td colspan="4"><span>变速箱</span></td>
            </tr>
            <tr class="deploy_tr">
                <td class="w148 bdl">变速箱名称</td>
                <td id="gName" class="w237"></td>
                <td class="w148 bdl">变速箱类型</td>
                <td id="gType" class="w237"></td>
            </tr>
            <tr class="deploy_tr">
                <td class="w148 bdl">挡位个数</td>
                <td id="gNum" class="w237"></td>
                <td class="w148 bdl"></td>
                <td class="w237"></td>
            </tr>
        </table>
        <table width="90%" border="0" cellspacing="0" cellpadding="0" class="deploy_tb">
            <tr class="deploy_cn">
                <td colspan="4"><span>底盘转向</span></td>
            </tr>
            <tr class="deploy_tr">
                <td class="w148 bdl">驱动方式</td>
                <td id="drivingmode" class="w237"></td>
                <td class="w148 bdl">车体结构</td>
                <td id="bodystructure" class="w237"></td>
            </tr>
            <tr class="deploy_tr">
                <td class="w148 bdl">助力类型</td>
                <td id="typeassistance" class="w237"></td>
                <td class="w148 bdl">前悬挂类型</td>
                <td id="fronttype" class="w237"></td>
            </tr>
            <tr class="deploy_tr">
                <td class="w148 bdl">后悬挂类型</td>
                <td id="behindtype" class="w237"></td>
                <td class="w148 bdl"></td>
                <td class="w237"></td>
            </tr>
        </table>
        <table width="90%" border="0" cellspacing="0" cellpadding="0" class="deploy_tb">
            <tr class="deploy_cn">
                <td colspan="4"><span>车轮制动</span></td>
            </tr>
            <tr class="deploy_tr">
                <td class="w148 bdl">前制动器类型</td>
                <td id="frontbrake" class="w237"></td>
                <td class="w148 bdl">后制动器类型</td>
                <td id="rearbrak" class="w237"></td>
            </tr>
            <tr class="deploy_tr">
                <td class="w148 bdl">驻车制动类型</td>
                <td id="parkingtype" class="w237"></td>
                <td class="w148 bdl">前轮胎规格</td>
                <td id="fronttire" class="w237"></td>
            </tr>
            <tr class="deploy_tr">
                <td class="w148 bdl">后轮胎规格</td>
                <td id="reartire" class="w237"></td>
                <td class="w148 bdl">备胎</td>
                <td id="sparetire" class="w237"></td>
            </tr>
        </table>
    </div>
    <el-footer style="text-align: center;"> Copyright © 2016-2017, snncar.com,All Rights Reserved
        皖ICP备16022456号-1
    </el-footer>
</div>
</body>
<script>
    var baseId;

    function getCar() {
        var carId = sessionStorage.getItem("carId");
        $.ajax({
            type: 'post',
            url: '/forum/car/selectCarById',
            dataType: 'json',
            data: {carId: carId},
            success: function (data) {
                console.log(data);
                $('#carImg').html("<img src='http://qdl9h2nk4.bkt.clouddn.com/" + data.data.carImg + "'>");
                $('#h2').append(data.data.carType);
                baseId = data.data.baseId;
                getBase();
            }
        })
    }

    function getBase() {
        $.ajax({
            type: 'post',
            url: '/forum/base/selectBaseById',
            dataType: 'json',
            data: {baseId: baseId},
            success: function (data) {
                console.log(data);
                $('#clevel').append(data.data.carlevel);
                $('#oil').append(data.data.oilConsumption);
                $('#displacement').append(data.data.displacement);
                $('#quality').append(data.data.quality);
                $('#gearbox').append(data.data.gearbox);
                var eId = data.data.eId;
                var gId = data.data.gId;
                var chassisId = data.data.chassisId;
                var wheelId = data.data.wheelId;
                var bodyId = data.data.bodyId;
                getEngine(eId);
                getGearbox(gId);
                getChassis(chassisId);
                getWheel(wheelId);
                getBody(bodyId);
            }
        })
    }

    function getBody(bodyId) {
        $.ajax({
            type: 'post',
            url: '/forum/body/selectBodyById',
            dataType: 'json',
            data: {bodyId: bodyId},
            success: function (data) {
                console.log(data);
                $('#carLong').append(data.data.carLong);
                $('#carWidth').append(data.data.carWidth);
                $('#carHeight').append(data.data.carHeight);
                $('#wheelbase').append(data.data.wheelbase);
                $('#smallspace').append(data.data.smallspace);
                $('#frontspace').append(data.data.frontspace);
                $('#rearspace').append(data.data.rearspace);
                $('#structure').append(data.data.structure);
                $('#door').append(data.data.door);
                $('#seat').append(data.data.seat);
                $('#oilspace').append(data.data.oilspace);
                $('#minisize').append(data.data.minisize);
                $('#bigsize').append(data.data.bigsize);
            }
        })
    }

    function getEngine(eId) {
        $.ajax({
            type: 'post',
            url: '/forum/engine/selectEngineById',
            dataType: 'json',
            data: {eId: eId},
            success: function (data) {
                console.log(data);
                $('#edisplacement').append(data.data.eDisplacement);
                $('#einlet').append(data.data.eInlet);
                $('#ectype').append(data.data.eCtype);
                $('#ecnum').append(data.data.eCnum);
                $('#ematerial').append(data.data.eMaterial);
                $('#fuel').append(data.data.fuel);
                $('#eoilsupply').append(data.data.eOilsupply);
                $('#environmental').append(data.data.environmental);
            }
        })
    }

    function getGearbox(gId) {
        $.ajax({
            type: 'post',
            url: '/forum/gearbox/selectGearboxById',
            dataType: 'json',
            data: {gId: gId},
            success: function (data) {
                console.log(data);
                $('#gName').append(data.data.gName);
                $('#gType').append(data.data.gType);
                $('#gNum').append(data.data.gNum);
            }
        })
    }

    function getChassis(chassisId) {
        $.ajax({
            type: 'post',
            url: '/forum/chassis/selectChassisById',
            dataType: 'json',
            data: {chassisId: chassisId},
            success: function (data) {
                console.log(data);
                $('#drivingmode').append(data.data.drivingmode);
                $('#bodystructure').append(data.data.bodystructure);
                $('#typeassistance').append(data.data.typeassistance);
                $('#fronttype').append(data.data.fronttype);
                $('#behindtype').append(data.data.behindtype);
            }
        })
    }

    function getWheel(wheelId) {
        $.ajax({
            type: 'post',
            url: '/forum/wheel/selectWheelById',
            dataType: 'json',
            data: {wheelId: wheelId},
            success: function (data) {
                console.log(data);
                $('#frontbrake').append(data.data.frontbrake);
                $('#rearbrak').append(data.data.rearbrak);
                $('#parkingtype').append(data.data.parkingtype);
                $('#fronttire').append(data.data.fronttire);
                $('#reartire').append(data.data.reartire);
                $('#sparetire').append(data.data.sparetire);
            }
        })
    }

    function main() {
        window.location.href = "../../3_main/3_main.html";
    }

    function car() {
        window.location.href = "car.jsp";
    }

    var Main = {
        data() {
            return {}
        }
    };
    var Ctor = Vue.extend(Main);
    new Ctor().$mount('#main');//element组件不起作用,实例化Vue,需要手动挂载
    getCar();
</script>

<script>
    $.ajax({
        url: '/forum/user/getUserInfo',
        type: 'get',
        dataType: 'json',
        success: function (data) {
            if (data.state == '0') {
                // alert("登陆失败");
                $('.noLog').show();
                $('.Log').hide();
                $('.userInfo').hide();
                $('.regist').show();
            } else if (data.state == '200') {
                // 登录了
                var parm = "userName=" + data.data.userName;
                // alert("登陆成功");
                $.ajax({
                    url: "/forum/usercenter/selectByUsetName",
                    data: parm,
                    type: "post",
                    success: function (data) {
                        $('.regist').hide();
                        $('.userInfo').show();
                        $('.userImg').attr("src", data.userPhoto);
                        $('.userName').text(data.userName);
                        $('.noLog').hide();
                        $('.Log').show();
                    }
                })
            }
        }
    })


    function qing() {
        alert("请先去登录")
    }

    function layout() {
        // 退出登录

    }
</script>
</html>
